<template>
  <div @click="toLive">
    <div class="loading-box" v-if="isLoading">
      <loading></loading>
    </div>
    <div class="home" v-else>
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide>
          <img class="banner" src="~@/assets/img/banner_dqye.png" @click="toDqy" >
        </swiper-slide>
        <swiper-slide
          v-for="item in banners"
          :key="item.app_store_id"
          >
          <img class="banner" :src="item.banner_pic2" @click="skip(item)" >
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
      <div class="adverts">
        <div class="advert-dot"></div>
        <swiper :options="advertOption">
          <swiper-slide
            v-for="(item, index) in adverts"
            :key="index">
            <p v-html="item.success_case"></p>
          </swiper-slide>
        </swiper>
      </div>
      <div class="categorys" v-if="false">
        <div class="category" v-for="(category,index) in categorys" :key="index" @click="toCategory(category)">
          <img :src="category.item_pic"/>
          <div>{{category.item_name}}</div>
        </div>
      </div>
      <div class="apply-box" @click="toScreen">
        <div class="apply-items">
          <div class="apply-item" v-for="(item, index) in infoes" :key="index">
            <img :src="item.img"/>
            <div class="apply-item-label">{{item.label}}</div>
          </div>
        </div>
        <div class="apply-btn">申请贷款</div>
      </div>

      <div class="title">热门贷款<i class="icon-hot"></i></div>
      <div class="contents">
        <ad-item
          v-for="(item, index) in ads"
          :key="index"
          :data="item"
          @click.native="toDetail(item)"
          >
        </ad-item>
      </div>
      <div class="button-box">
        <button class="button is-big" @click="toList">查看更多贷款</button>
      </div>
    </div>
  </div>
</template>
<script>
import AdvertItem from '@/components/AdvertItem'
import AdItem from '@/components/AdItem'
import { mapGetters } from 'vuex'
export default {
  components: {
    AdvertItem,
    AdItem
  },
  computed: {
    ...mapGetters({
      info: 'global/info',
      appname: 'global/appname',
      isIos: 'isIos'
    }),
    banners () {
      return this.data.ad_banner_vos || []
    },
    adverts () {
      return this.data.ad_success_cases || []
    },
    ads () {
      return this.data.ad_list_vos || []
    },
    categorys () {
      return this.data.ad_item_list || []
    }
  },
  data () {
    return {
      isLoading: false,
      url: '',
      data: {},
      infoes: [
        {
          img: require('@/assets/img/index_icon1.png'),
          label: '1.输入金额'
        }, {
          img: require('@/assets/img/index_icon2.png'),
          label: '2.智能匹配'
        }, {
          img: require('@/assets/img/index_icon3.png'),
          label: '3.审批放款'
        }
      ],
      swiperOption: {
        autoplay: 3000,
        pagination: '.swiper-pagination',
        mousewheelControl: true,
        observeParents: true
      },
      advertOption: {
        autoplay: 3000,
        direction: 'vertical',
        mousewheelControl: false
      }
    }
  },
  created () {
    if (Object.keys(this.$route.query).length === 3) {
      let { source_app, user_id, idfa } = this.$route.query
      this.$store.dispatch('global/setInfo', {source_app, user_id, idfa})
    }
    this.isLoading = true
    this.$api.get('ads/index2').then((res) => {
      this.data = res.data
      this.isLoading = false
    })
    if (this.info.source_app === 'com.chuangqi.credit') { // 掉钱眼儿测试
      this.$api.post('device', this.info)
    }
  },
  methods: {
    toDqy () {
      this.$api.get('ads/try_banner_idfa').then(res => {
        window.location.href = 'https://itunes.apple.com/cn/app/id1319748643?mt=8'
        // window.location.href = 'itms-services://?action=download-manifest&url=https%3A%2F%2Fwww.pgyer.com%2Fapiv2%2Fapp%2Fplist%3FappKey%3D58f54dcc242971d2b7230d8c55014a93%26_api_key%3Db82420b9fa98c9b5fa313e03eeccecbc'
      })
    },
    toLive () {
      window.ga && window.ga('send', 'event', this.appname, '点击', '活人')
    },
    toScreen () {
      window.ga && window.ga('send', 'event', this.appname, '查看筛选', '筛选')
      this.$router.push('/screen')
    },
    skip (item) {
      this.$router.push({ name: 'Detail', params: { id: item.app_store_id } })
      try {
        window.mobClickPars('banner_num', '推荐广告')
      } catch (e) {}
    },
    toDetail (item) {
      this.$router.push({ name: 'Detail', params: { id: item.app_store_id } })
      try {
        window.mobClickPars('ad_num', item.title)
      } catch (e) {}
    },
    toCategory (category) {
      this.$router.push({ name: 'Category', params: { id: category.id } })
      try {
        // 统计各个分类的点击信息
        window.ga && window.ga('send', 'event', this.appname, '分类', category.item_name)
        window.mobClickPars('ad_category', category.item_name)
      } catch (e) {}
    },
    toList () {
      if (this.info.source_app.indexOf('com.') === -1) { // 若不在app里则直接跳转
        this.$router.push('/list')
      } else {
        try {
          if (this.isIos) { // 判断是否是IOS
            window.sendEvent()
          } else {
            alert('sendEvent')
          }
        } catch (e) {}
      }
    }
  }
}
</script>

<style lang="scss">
@import '~@/scss/base.scss';
.swiper-container{
  height: calc(100vw * 360 / 750);
}
.swiper-pagination-bullet-active{
  background: white;
}
.apply-box{
  width: calc(100vw - 20px);
  margin-top: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  background: white;
  flex-direction: column;
  .apply-items{
    display: flex;
    width: 100vw;
    & > div {
      flex-flow: 0;
      flex-basis: 0;
      flex-grow: 1;
      text-align: center;
      padding: 10px 0;
      img {
        width: 45px;
        height: 45px;
        margin-bottom: 5px;
      }
      .apply-item-label{
        font-size: 14px;
        color: #333333;
      }
    }
  }
  .apply-btn {
    margin: 5px 0;
    background: #0087b9;
    color: white;
    width: 300px;
    height: 40px;
    border-radius: 20px;
    font-size: 16px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.banner {
  width: 100%;
}
.title {
  text-align: left;
  padding: 10px;
  font-size: $title-size;
  display: flex;
  align-items: center;
  padding-left: 22px;
  color: $hint-color;
}
.adverts {
  display: flex;
  align-items: center;
  margin-top: 1px;
  height: 20px;
  background: white;
  color: $hint-color;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  padding: 3px 10px;
  .advert-dot{
    background: red;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 5px;
    margin-left: 5px;
  }
  p {
    width: calc(100vw - 35px);
    text-overflow: ellipsis;
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 1; /** 显示的行数 **/
    overflow: hidden;  /** 隐藏超出的内容 **/
  }
  .swiper-container{
    margin-top: 1px;
    height: 20px;
  }
}

.categorys{
  margin-top: 5px;
  display: flex;
  width: 100vw;
  background: white;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
  .category{
    width: calc(100vw / 3);
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #666;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    img {
      width: 50px;
      margin-bottom: 10px;
    }
  }
}
.icon-hot{
  height: 20px;
  width: 20px;
  background: url('~@/assets/img/hot.png') no-repeat center;
  background-size: 11px 15px;
}
</style>

